<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
// 全部导入所有的模块，包体积大
// es6模块化： import * as echarts from 'echarts'
// commonJS模块化 const echarts = require('echarts')
// 按需导入
// es6模块化
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
/* import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, GridComponent} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
// 注册必须的组件
echarts.use([BarChart, TitleComponent, CanvasRenderer, TooltipComponent, GridComponent])
 */
// commonJS
const echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/bar') // 引入柱状图
// 引入提示框和标题组件
require('echarts/lib/component/title')
require('echarts/lib/component/grid')
require('echarts/lib/component/tooltip')
export default {
  mounted() {
    this.getRadarEcharts()
  },
  methods: {
    getRadarEcharts() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.myDiv)
      const options = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(options)
    }
  }
}
</script>

<style lang="scss" scoped>
.radar-echart {
  width: 600px;
  height: 400px;
}
</style>
